<template>
  <!-- 使用根模块state的数据-->
  
  <div>
    {{$store.state.username}}
    <button @click="fn">改变名字</button>
    <button @click="$store.commit('editname')">改变名字</button>
     <button @click="$store.dispatch('updatename')">3秒后改变名字</button>

 </div> 


</template>

<script>
  import {useStore} from 'vuex'
 
  export default{
    name:'App',
    setup(){
      // 使用 vuex仓库
      const store=useStore()
      // 使用该模块里面的state的数据
      console.log(store.state.username);
      // 使用根模块getters的数据

      const fn=()=>{
        // 调用根模块mutations函数
        store.commit('editname')
      }
      // 调用根模块的actions函数
      // store.dispatch('updatename')
      return {fn}
    }
  }
</script>

<style lang="less">


</style>
